<template>
    <div id="app">
        <p v-text="textContent"></p>
        <p v-html="htmlContent"></p>
        <br>
        <img :src="imgs" v-if="showImgs"><br>
        <img :src="imgs" v-show="showImgs"><br>
        <button @click="showImgs = !showImgs">显示/隐藏</button>
        <hr>

        <h1>{{ age }}</h1>
        <p v-if="age >= 0 && age <= 6">小童</p>
        <p v-else-if="age >= 7 && age <= 12">大童</p>
        <p v-else-if="age >= 13 && age <= 17">青少年</p>
        <p v-else-if="age >= 18 && age <= 45">青壮年</p>
        <p v-else>老年人</p>

        <hr>
        <br>

        <ul>
            <li v-for="(item, index) in list" :key="index">{{ item.id }}---{{ item.name }}</li>
        </ul>

        <ul>
            <li v-for="item in list" :key="item.id">
                {{ item.id }}---{{ item.name }}
            </li>
        </ul>

        <button @click="addItem" class="addbtn">添加</button>
    </div>
</template>
  
<script>
import imgs from '../assets/em.jpg'

export default {
    name: 'App',
    data() {
        return {
            textContent: '今天天气很好',
            htmlContent: `<h1 style="color:red">天空很蓝</h1>`,  //模板字符串
            imgs,
            showImgs: true,
            age: 18,
            list: [
                { id: 1, name: '111', },
                { id: 2, name: '222', },
                { id: 3, name: '333', },
                { id: 4, name: '444', },
            ]

        }
    },
    methods: {
        addItem() {
            this.list.push({ id: 5, name: '555' })
        }
    }
}
</script>
  
<style>
body {
    margin: 0;
    padding: 0;
    display: inline-block;
}

img {
    width: 40px;
    height: 30px;
    margin-top: 5px;

}

.addbtn{
    width: 50px;
    height: 30px;
    font-size: 17px;
    margin-left: 35px;
}
</style>
  